<template>
  <div class="Upstream">
    消息配置
    <div class="demo-block">
        <div id="table_config">
            <el-button @click="handleCreate()" type="primary" size="small" style="margin-top: 10px">新增</el-button>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%;margin-top: 10px">
                <el-table-column
                        label="编号"
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="url"
                        label="接口地址"
                        width="170">
                </el-table-column>
                <el-table-column
                        prop="cspid"
                        label="CSPID"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="lspid"
                        label="LSPID"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="cmdFileUrl"
                        label="消息文件FTP地址"
                       >
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="150">
                    <template slot-scope="scope">
                        <el-button @click="handleUpdate(scope.row)" size="small" type="primary" icon="el-icon-edit" title="修改" circle></el-button>
                        <el-button @click="handleDelete(scope.row)" size="small" type="danger" icon="el-icon-delete" title="删除" circle></el-button>
                        <el-button @click="handleDistribute(scope.row)" size="small" type="success" icon="el-icon-arrow-right" title="发送" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog title="新增" :visible.sync="dialogFormVisible" >
                <div class="demo-block">
                    <el-form ref="form" :model="form"  label-width="180px" :rules="rules">
                        <el-form-item label="SOAP消息地址" prop="url">
                            <el-input v-model="form.url"></el-input>
                        </el-form-item>
                        <el-form-item label="CSPID" prop="cspid">
                            <el-input v-model="form.cspid"></el-input>
                        </el-form-item>
                        <el-form-item label="LSPID" prop="lspid">
                            <el-input v-model="form.lspid"></el-input>
                        </el-form-item>
                        <el-form-item label="cmdFileUrl" prop="cmdFileUrl">
                            <el-input v-model="form.cmdFileUrl"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm('form')">确 定</el-button>
                </div>
            </el-dialog>

        </div>

      </div>
      <div style="margin-top: 10px">结果查询</div>
      <div class="demo-block">
          <div id="table_result">
              <el-table
                      :data="detailData"
                      border
                      style="width: 100%;margin-top: 10px">
                  <el-table-column
                          label="编号"
                          type="index"
                          width="50">
                  </el-table-column>
                  <el-table-column
                          prop="correlateId"
                          label="相关性ID"
                          width="120">
                  </el-table-column>
                  <el-table-column
                          prop="url"
                          label="接口地址"
                          width="170" >
                  </el-table-column>
                  <el-table-column
                          prop="cspid"
                          label="CSPID"
                          width="80">
                  </el-table-column>
                  <el-table-column
                          prop="lspid"
                          label="LSPID"
                          width="80">
                  </el-table-column>
                  <el-table-column
                          prop="cmdFileUrl"
                          label="消息文件FTP地址"
                  >
                  </el-table-column>
                  <el-table-column
                          prop="createTime"
                          label="日期"
                          width="170"
                  >
                  </el-table-column>
                  <el-table-column
                          label="状态"
                          prop="state"
                  >
                  </el-table-column>
              </el-table>

              <el-dialog title="新增" :visible.sync="dialogFormVisible" >
                  <div class="demo-block">
                      <el-form ref="form" :model="form"  label-width="180px" :rules="rules">
                          <el-form-item label="SOAP消息地址" prop="url">
                              <el-input v-model="form.url"></el-input>
                          </el-form-item>
                          <el-form-item label="CSPID" prop="cspid">
                              <el-input v-model="form.cspid"></el-input>
                          </el-form-item>
                          <el-form-item label="LSPID" prop="lspid">
                              <el-input v-model="form.lspid"></el-input>
                          </el-form-item>
                          <el-form-item label="cmdFileUrl" prop="cmdFileUrl">
                              <el-input v-model="form.cmdFileUrl" placeholder="e.g:ftp://用户名:密码@IP/XML文件路径"></el-input>
                          </el-form-item>
                      </el-form>
                  </div>
                  <div slot="footer" class="dialog-footer">
                      <el-button @click="dialogFormVisible = false">取 消</el-button>
                      <el-button type="primary" @click="submitForm('form')">确 定</el-button>
                  </div>
              </el-dialog>

          </div>

      </div>
  </div>
</template>

<script>
export default {
    name: 'Upstream',
    data() {
        return {
            dialogFormVisible: false,
            form:{
                id : '',
                url : '',
                cspid : '',
                lspid:'',
                cmdFileUrl:''
            },
            rules: {
                url: [{ required: true,  trigger: 'blur' }],
                cspid: [{ required: true,  trigger: 'blur' }],
                lspid: [{ required: true,  trigger: 'blur' }],
                cmdFileUrl: [{ required: true,  trigger: 'blur' },
                             { pattern:'^ftp://.+?:.+?@.+?/.+?\.xml$' ,trigger: 'blur',message:'格式错误'}],
            },
            tableData: [],
            detailData:[],
        }


    },
    methods: {
        init(){
            this.axios.post('/upstream/soapconfig').then((response) => {
                console.log(response.data);
                let soapconfig = response.data;
                this.tableData = soapconfig;
            }).catch((error) => {
                console.log(error);
                this.$notify.error({
                    title: '错误',
                    message:  error,
                    duration: 0
                });
            });
        },initDetails(){
            this.axios.post('/upstream/distribute/list').then((response) => {
                console.log(response.data);
                let detailData = response.data;
                this.detailData = detailData;
            }).catch((error) => {
                console.log(error);
                this.$notify.error({
                    title: '错误',
                    message:  error,
                    duration: 0
                });
            });
        },
        parseResult(result){
            if(result.resultCode === 0){
                this.$message({
                    message: '操作成功',
                    type: 'success'
                });
            }else{
                this.$message({
                    message: result.resultMsg,
                    type: 'error'
                });
            }
        },
        handleCreate() {
            this.form.id = '';
            this.form.url = '';
            this.form.cspid = '';
            this.form.lspid = '';
            this.form.cmdFileUrl = '';
            this.dialogFormVisible = true;
        },
        handleUpdate(row) {
            this.form.id = row.id;
            this.form.url = row.url;
            this.form.cspid = row.cspid;
            this.form.lspid = row.lspid;
            this.form.cmdFileUrl = row.cmdFileUrl;
            this.dialogFormVisible = true;
        },
        handleDelete(row) {
            this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params = new URLSearchParams();
                params.append('id', row.id);
                this.axios.post('/upstream/soapconfig/delete', params).then((response) => {
                    console.log(response);
                    let result = response.data;
                    this.parseResult(result);
                    this.init();
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                }).catch((error) => {
                    console.log(error);
                    this.$notify.error({
                        title: '错误',
                        message: error,
                        duration: 0
                    });
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        handleDistribute(row) {
            let params = new URLSearchParams();
            params.append('id', row.id);
            params.append('url', row.url);
            params.append('cspid', row.cspid);
            params.append('lspid', row.lspid);
            params.append('cmdFileUrl', row.cmdFileUrl);
            this.axios.post('/upstream/distribute', params).then((response) => {
                console.log(response);
                let result = response.data;
                this.parseResult(result);
                this.initDetails();
            }).catch((error) => {
                console.log(error);
                this.$notify.error({
                    title: '错误',
                    message: error,
                    duration: 0
                });
            });
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let params = new URLSearchParams();
                    params.append('id', this.form.id);
                    params.append('url', this.form.url);
                    params.append('cspid', this.form.cspid);
                    params.append('lspid', this.form.lspid);
                    params.append('cmdFileUrl', this.form.cmdFileUrl);
                    this.axios.post('/upstream/soapconfig/add', params).then((response) => {
                        console.log(response);
                        let result = response.data;
                        this.init();
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.$refs[formName].resetFields();
                        this.dialogFormVisible = false;
                    }).catch((error) => {
                        console.log(error);
                        this.$notify.error({
                            title: '错误',
                            message: error,
                            duration: 0
                        });
                        this.$refs[formName].resetFields();
                    });
                } else {
                    return false;
                }
            });
        }
    },
    created(){
        this.init();
        this.initDetails();
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    .demo-block{
    border: 1px solid #ebebeb;
    border-radius: 3px;
    padding: 24px;
    margin-top: 10px;
    }

    .el-input{
        width: 80%;
    }

</style>
